<template>
    <!-- 建议修改为页面使用 -->
    <n-tabs default-value="createContest" type="line" justify-content="space-evenly" size="large">
        <n-tab-pane name="createContest" tab="创建竞赛">
            <!-- 这里更换成form -->
            <n-form style="margin-left: 10%">
                <n-form-item label="竞赛名">
                    <n-space>
                        <n-input placeholder="请输入竞赛名" v-model:value=createForm.contestName style="width: 500px;" />
                    </n-space>
                </n-form-item>
                <n-form-item label="竞赛时间区间">
                    <n-date-picker
                        type="datetimerange"
                        start-placeholder="请选择开始时间"
                        end-placeholder="请选择结束时间"
                        v-model:value="createForm.range"
                        clearable
                        style="width: 500px;"
                    />
                </n-form-item>
                <n-form-item label="竞赛权限">
                    <n-radio-group v-model:value="createForm.type">
                        <n-radio-button :value="1">公开的</n-radio-button>
                        <n-radio-button :value="0">私立的</n-radio-button>
                    </n-radio-group>
                </n-form-item>
                <n-space>
                    <n-form-item v-if="!createForm.type" label="选择班级">
                        <n-transfer
                            v-if="!createForm.type"
                            style="width: 600px;"
                            filterable
                            virtual-scroll
                            ref="transfer"
                            v-model:value="createForm.classes"
                            :options="classesOptions"
                            source-title="所有班级"
                            source-filter-placeholder="请输入班级名称"
                            target-title="已选择班级"
                            target-filter-placeholder="请输入已选班级名称"
                        />
                    </n-form-item>
                    <n-form-item label="选择题目">
                        <n-transfer
                            style="width: 600px;"
                            filterable
                            virtual-scroll
                            ref="transfer"
                            v-model:value="createForm.questions"
                            :options="questionsOptions"
                            source-title="所有题目"
                            source-filter-placeholder="请输入题目编号"
                            target-title="已选择班级"
                            target-filter-placeholder="请输入已选择题目编号"
                        />
                    </n-form-item>
                </n-space>
                <n-form-item>
                    <n-button type="primary" @click="createContest">创建</n-button>
                </n-form-item>
            </n-form>
        </n-tab-pane>
        <n-tab-pane name="updateContest" tab="修改竞赛">
            <n-form :model="updateForm" style="margin-left: 10%;">
                <n-form-item label="竞赛编号">
                    <n-space>
                        <n-input placeholder="请输入竞赛编号"></n-input>
                        <n-button type="primary">查询是否存在</n-button>
                    </n-space>
                </n-form-item>
                <n-form-item label="竞赛时间区间">
                    <n-date-picker type="datetimerange" clearable />
                </n-form-item>
                <n-form-item label="竞赛权限">
                    <n-radio-group v-model:value="createForm.type">
                        <n-radio-button :value="1">公开的</n-radio-button>
                        <n-radio-button :value="0">私立的</n-radio-button>
                    </n-radio-group>
                </n-form-item>
                <n-space>
                    <n-form-item label="竞赛班级" v-if="!createForm.type">
                        <n-transfer
                            style="width: 600px;"
                            filterable
                            virtual-scroll
                            ref="transfer"
                            v-model:value="createForm.classes"
                            :options="classesOptions"
                            source-title="所有班级"
                            source-filter-placeholder="请输入班级名称"
                            target-title="已选择班级"
                            target-filter-placeholder="请输入已选班级名称"
                        />
                    </n-form-item>
                    <n-form-item label="竞赛题目">
                        <n-transfer
                            style="width: 600px;"
                            filterable
                            virtual-scroll
                            ref="transfer"
                            v-model:value="createForm.questions"
                            :options="questionsOptions"
                            source-title="所有题目"
                            source-filter-placeholder="请输入题目编号"
                            target-title="已选择班级"
                            target-filter-placeholder="请输入已选择题目编号"
                        />
                    </n-form-item>
                </n-space>
                <n-form-item>
                    <n-button type="primary">修改</n-button>
                </n-form-item>
            </n-form>
        </n-tab-pane>
        <n-tab-pane name="deleteContest" tab="删除竞赛">
            <n-form style="margin-left: 5%;">
                <n-form-item label="竞赛编号">
                    <n-space>
                        <n-input placeholder="请输入竞赛编号" />
                        <n-button type="primary">查询是否存在</n-button>
                    </n-space>
                </n-form-item>
                <n-form-item>
                    <n-button type="primary">删除</n-button>
                </n-form-item>
            </n-form>
        </n-tab-pane>
    </n-tabs>
    <!-- 这里应该叫竞赛管理 包含创建修改及删除竞赛 -->
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { NDatePicker, NTabs, NTabPane, NTransfer, NForm, NFormItem, useMessage } from "naive-ui";
import { toCreateContest, toGetClasses, toGetQuestions } from '@/utils/contestManage'
import { classesOptions, questionsOptions, createForm } from '@/models/contestManage'

export default defineComponent({
    created() {
        this.setClasses();
        this.setQuestions();
    },
    components: { NDatePicker, NTabs, NTabPane, NTransfer, NForm, NFormItem },
    setup() {
        const message = useMessage();
        return {
            message: message
        };
    },
    data() {
        return {
            classesOptions: ref<classesOptions[]>([]),
            questionsOptions: ref<questionsOptions[]>([]),
            createForm: ref<createForm>({
                contestName: '',
                range: (Date.now(), Date.now()),
                type: 0,
                questions: [],
                classes: []
            }),
            updateForm: ref()
        }
    },
    methods: {
        async setClasses() {
            const options = await toGetClasses();
            if (options) this.classesOptions = options;
        },
        async setQuestions() {
            const options1 = await toGetQuestions();
            if (options1) 
                this.questionsOptions = options1;
            },
        async createContest() {
            const data = await toCreateContest(this.createForm);
            if (data > 0) {
                this.message.success('竞赛创建成功');
                this.$router.replace('/');
            } else if (data == 0) {
                this.message.error('竞赛创建失败');
            } else {
                this.message.error('服务器出了点问题，稍后再试');
            }
        }
    },
})
</script>